<template>
  <page-meta :page-style="'overflow:' + (showParams ? 'hidden' : 'visible')"></page-meta>
  <view class="view">
    <view :class="['page-mask', showParams ? 'page-mask-show' : 'page-mask-hidden']"></view>
    <!-- 商品图片 -->
    <swiper
      class="goods-swiper"
      circular
      indicator-dots
      :autoplay="true"
      :interval="3000"
      :duration="500"
      indicator-active-color="#fff"
    >
      <swiper-item v-for="image in imageSwiperList" :key="image.id">
        <view class="goods-swiper-item">
          <image :src="image.url" @click="handleshowbigpic(image.url)"></image>
        </view>
      </swiper-item>
    </swiper>

    <!-- 商品信息 -->
    <view class="goods-info">
      <view class="goods-info-top">
        <view class="price">
          <text class="small">￥</text>
          <text class="big">{{ goodsInfo.price.big }}</text>
          <text class="small">.{{ goodsInfo.price.small }}</text>
        </view>
        <!-- plain 是否镂空 -->
        <button class="share" @click="handleshareForOther()" open-type="share" plain="true">
          <image src="../../static/share.svg"></image>
          <text>分享</text>
        </button>
      </view>
      <view class="goods-info-name">{{ goodsInfo.name }}</view>
      <view class="goods-info-intro">{{ goodsInfo.description }}</view>
    </view>

    <!-- 商品类型和默认收货地址 -->
    <view class="goods-type">
      <view class="type">
        <view class="type-title">已选</view>
        <view class="type-name">{{ userParams.goodsType.name }}</view>
        <image class="more" src="../../static/more.svg" @click="handleshowParams('params')"></image>
      </view>
      <view class="address">
        <view class="type-title">送至</view>
        <view class="address-con">
          {{ formatAddress(userParams.address.province_city_district) + userParams.address.address_detail }}
        </view>
        <image class="more" src="../../static/more.svg" @click="handleshowParams('address')"></image>
      </view>
    </view>

    <!-- 商品评论 -->
    <view class="goods-comment">
      <view class="span-top">
        <view class="span-title">
          <image src="../../static/title-icon.svg" class="span-title-icon"></image>
          评价
          <text class="span-title-count">({{ goodsReviews.length }})</text>
          <image src="../../static/title-icon.svg" class="span-title-icon"></image>
        </view>
        <view class="span-right">100% 好评</view>
      </view>

      <!-- 用户评论 -->
      <view class="user-comment-list">
        <view class="user-comment" v-for="(review, index) in reviewList" :key="review.id" :id="'review' + index">
          <view class="top">
            <image
              class="user-aver"
              :src="
                review.avatar == null || review.avatar.length == 0 ? '../../static/missing-face.png' : review.avatar
              "
            ></image>

            <view class="user-nick">{{ review.username }}</view>
            <view class="user-rate">
              <uni-rate :value="review.score" :readonly="true" :size="16" allow-half @change="onChange" />
            </view>
          </view>
          <view class="user-comment-content">
            {{ review.content.substring(0, review.spread ? review.content.length : reviewMaxCount) }}
            <text v-if="review.content.length > reviewMaxCount && !review.spread">
              ...
              <text class="spread" @click="handlespread(index)">展开</text>
            </text>
          </view>
          <view class="bottom">
            <view class="user-goods-type">{{ review.param_name }}</view>
            <view class="user-comment-date">{{ formatCommentDate(review.create_time) }}</view>
          </view>
        </view>
      </view>

      <view class="no-comment" v-if="reviewList.length === 0">
        <image src="../../static/message.svg"></image>
        <view>暂无评论</view>
      </view>

      <!-- 展开更多评论 -->
      <view
        class="goods-comment-more"
        v-if="goodsReviews.length > showReviewMaxCount && !showAllReviews"
        @click="handleshowAllReviews"
      >
        <view>查看全部评价</view>
      </view>
    </view>

    <!-- 热门商品 -->
    <mHostGoods></mHostGoods>

    <!-- 商品介绍 -->
    <view class="goods-details">
      <view class="span-top">
        <view class="span-title">
          <image src="../../static/title-icon.svg" class="span-title-icon"></image>
          商品介绍
          <image src="../../static/title-icon.svg" class="span-title-icon"></image>
        </view>
        <view class="span-right"></view>
      </view>
      <view v-html="goodsInfo.details"></view>
    </view>

    <!-- 参数显示弹窗 -->
    <view
      class="params-pop-wrapper"
      :style="showParams && showParamsStr === 'params' ? 'bottom:0;opacity:1;' : 'bottom: -100%;opacity:0;'"
    >
      <view class="mask" @click="showParams = false"></view>
      <view class="params-pop">
        <view class="goods-params-choose">
          <view class="goods-params-top">
            <image :src="coverUrl"></image>
            <view class="right">
              <view class="price">
                <text class="small">￥</text>
                <text class="big">{{ goodsInfo.price.big }}</text>
                <text class="small">.{{ goodsInfo.price.small }}</text>
              </view>
              <view class="details">
                <view class="gray">已选</view>
                <view>{{ userParams.goodsType.name }}</view>
              </view>
              <view class="inventory">
                <view class="gray">库存</view>
                <view>{{ goodsInfo.count }}</view>
              </view>
            </view>
          </view>

          <view class="goods-params-content">
            <view
              :class="[
                'goods-params-item',
                param.is_empty ? 'params-is-empty' : 'params-is-not-empty',
                userParams.goodsType.id === param.id ? 'params-is-choose' : ''
              ]"
              v-for="param in goodsParams"
              :key="param.id"
              @click="handleChooseParam(param)"
            >
              {{ param.name }}
              {{ param.is_empty ? '（无货）' : '' }}
            </view>
          </view>

          <view class="goods-count-content">
            <view class="goods-count">
              <view class="count-sub" @click="handleSub()">-</view>

              <input
                type="number"
                class="count-input"
                v-model="userParams.count"
                @blur="handleInputCount($event, goodsInfo.count)"
              />

              <view class="count-add" @click="handleAdd(goodsInfo.count)">+</view>
            </view>
          </view>

          <uni-goods-nav
            :options="[]"
            :fill="true"
            :button-group="goodsParamsButtonGroup"
            @click="onClick"
            @buttonClick="submitClick"
          />
        </view>
      </view>
    </view>

    <!-- 地址 -->
    <view
      class="params-pop-wrapper"
      :style="showParams && showParamsStr === 'address' ? 'bottom:0;opacity:1;' : 'bottom: -100%;opacity:0;'"
    >
      <view class="mask" @click="showParams = false"></view>
      <view class="params-pop">
        <view class="address-choose">
          <view class="address-choose-title">选择地址</view>

          <view class="address-content-scroll">
            <radio-group @change="radioChange">
              <view
                :class="['address-content', address.id == current_id ? 'address-choose' : '']"
                v-for="address in userAddressList"
                :key="address.id"
              >
                <view class="choose-radio">
                  <radio :value="address.id" :checked="address.is_default"></radio>
                </view>

                <view class="address-content-left">
                  <view class="left-title">收件人：</view>
                  <view class="left-title">电话：</view>
                  <view class="left-title">地址：</view>
                </view>

                <view class="address-content-right">
                  <view class="addressee">{{ address.consignee }}</view>
                  <view class="tel">{{ address.phone_number }}</view>
                  <view class="big-address">{{ formatAddress(address.province_city_district) }}</view>
                  <view class="small-address">{{ address.address_detail }}</view>
                </view>

                <view class="address-default" v-if="address.is_default">默认</view>
              </view>
            </radio-group>
          </view>

          <view class="add-address">
            <!-- <view class="add-btn" @click="handleAddAddress()">添加新地址</view> -->
            <view class="confirm" @click="handleChooseAddress()">确定</view>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部导航栏 -->
    <view class="bottom-nav">
      <uni-goods-nav
        :options="options"
        :fill="true"
        :button-group="buttonGroup"
        @click="onClick"
        @buttonClick="buttonClick"
      />
    </view>
  </view>
</template>

<script>
import { formatPrice } from '../../utils/formatPrice'
import formatAddress from '../../utils/formatAddress'
import { formatCommentDate } from '../../utils/formatDate'
import mHostGoods from '../../components/mHostGoods/index.vue'
export default {
  components: { mHostGoods },
  data() {
    return {
      options: [
        {
          icon: 'chat',
          text: '客服'
        },

        {
          icon: 'cart',
          text: '购物车',
          info: 0
        }
      ],
      buttonGroup: [
        {
          text: '加入购物车',
          backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
          color: '#fff'
        },
        {
          text: '立即购买',
          backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
          color: '#fff'
        }
      ],

      // 每条评论大于60字数会折叠
      reviewMaxCount: 60,
      // 默认显示3条
      showReviewMaxCount: 3,
      // 评论未展开时的默认高度
      reviewHeight: '230upx',
      // 默认显示评论
      reviewList: [],
      showAllReviews: false,
      showParamsStr: '',
      showParams: false,
      goodsParamsStatus: 'choose',
      user_id: '',
      // 用户选择的地址id
      current_id: '',
      goodsInfo: {
        id: '',
        category_id: '',
        count: '',
        description: '',
        details: '',
        logistics_price: null,
        name: '',
        price: {
          big: 0,
          small: '00'
        }
      },
      goodsParams: [],
      userAddressList: [],
      userParams: {
        goodsType: {
          id: '',
          name: ''
        },
        address: {
          id: '',
          province_city_district: '',
          address_detail: '暂无地址'
        },
        goods_id: '',
        count: 1
      },
      goodsReviews: [],

      // 另外使用一个api获取图片
      imageSwiperList: [],
      imageUrls: [], // 用于预览
      coverUrl: '',
      formatAddress,
      formatCommentDate
    }
  },

  computed: {
    goodsParamsButtonGroup() {
      switch (this.goodsParamsStatus) {
        case 'choose':
          return this.buttonGroup
        case 'nowBuy':
          return [this.buttonGroup[1]]
        case 'addCart':
          return [this.buttonGroup[0]]
      }
    }
  },
  onLoad(options) {
    this.coverUrl = options.coverUrl
    const goodsId = options.id
    // 获取数据
    this.userParams.goods_id = goodsId
    this.user_id = getApp().globalData.userInfo.id
    this.getSwiperList(goodsId)
    this.getGoodsInfo(goodsId)
    this.getGoodsCommentList(goodsId)
    this.getCartGoodsCount()
  },

  methods: {
    async getGoodsInfo(id) {
      const { data: res } = await uni.request({
        url: this.$domain.data + '/getSingleGoods/' + id
      })

      if (res.status != 200) {
        this.$checkStatus(res.status)
        return
      }

      this.goodsInfo = res.data
      this.goodsInfo.price = formatPrice(this.goodsInfo.price)

      // 获取参数
      const { data: paramData } = await this.getParams(res.data.id)

      if (paramData.status !== 200) {
        this.$checkStatus(res.status, '获取参数失败')
        return
      }

      this.goodsParams = paramData.data
      var i = 0
      for (i = 0; i < this.goodsParams.length; i++) {
        const element = this.goodsParams[i]
        if (!element.is_empty) {
          break
        }
      }
      if (i === this.goodsParams.length) {
        this.userParams.goodsType = {
          id: '',
          name: '暂无货源'
        }
        return
      }
      this.userParams.goodsType = this.goodsParams[i]

      // 获取用户地址
      const { data: addresses } = await this.getUserAddress()
      // console.log(addresses)
      if (addresses.status !== 200) {
        console.log(res)
        // this.$checkStatus(res.status, '获取地址失败')
        return
      }
      if (addresses.data.length === 0) {
        this.userAddressList = []

        return
      }
      this.userAddressList = addresses.data
      this.userParams.address = this.userAddressList[0]
    },
    async getSwiperList(goods_id) {
      const { data: res } = await uni.request({
        url: this.$domain.data + '/getGoodsSwiperList/' + goods_id
      })
      if (res.status !== 200) {
        this.$checkStatus(res.status, '获取商品轮播图失败')
        return
      }

      this.imageSwiperList = res.data.sort((a, b) => {
        return a.sort_index - b.sort_index
      })
    },

    async getGoodsCommentList(goods_id) {
      const { data: res } = await uni.request({
        url: this.$domain.data + '/getGoodsCommentsByGoodsId?goodsId=' + goods_id
      })
      if (res.status !== 200) {
        this.$checkStatus(res.status, '获取商品评论列表失败')
        return
      }

      // console.log(res)
      this.goodsReviews = res.data
      if (this.goodsReviews.length <= 3) {
        this.reviewList = [...this.goodsReviews]
      } else {
        this.reviewList = [this.goodsReviews[0], this.goodsReviews[1], this.goodsReviews[2]]
      }
    },

    getParams(goods_id) {
      return uni.request({
        url: this.$domain.data + '/getGoodsParamList/' + goods_id
      })
    },
    getUserAddress() {
      if (this.user_id.length === 0) {
        return []
      }
      return uni.request({
        url: this.$domain.data + '/getAllAddressByUid/' + this.user_id,
        header: getApp().globalData.header
      })
    },
    /**
     * 底部导航右边按钮控制
     */
    buttonClick(e) {
      this.showParams = true
      this.showParamsStr = 'params'

      if (e.index === 0) {
        // 加入购物车
        this.goodsParamsStatus = 'addCart'
      } else {
        // 立即购买
        this.goodsParamsStatus = 'nowBuy'
      }
    },

    onClick(e) {
      if (e.index === 0) {
        // 客服
        const url = '/pages/order/afterSale'
        uni.navigateTo({
          url: url
        })
      } else {
        // 购物车
        const url = '/pages/cart/index'
        uni.reLaunch({
          url: url
        })
      }
    },

    // 参数选择框底部按钮
    submitClick(e) {
      // console.log(e.content.text)
      const params = {
        user_id: parseInt(this.user_id),
        count: parseInt(this.userParams.count),
        goods_param_id: parseInt(this.userParams.goodsType.id),
        goods_id: parseInt(this.userParams.goods_id),
        price: parseFloat(this.userParams.goodsType.price * this.userParams.count)
      }

      // 遍历判断验证参数
      for (const key in params) {
        if (Object.prototype.hasOwnProperty.call(params, key)) {
          const element = params[key]
          if (Number.isNaN(element)) {
            uni.showToast({
              icon: 'none',
              title: '参数不能为空'
            })
            return
          }
        }
      }

      if (e.content.text === '加入购物车') {
        this.saveCartGoods(params)
        return
      }
      if (e.content.text === '立即购买') {
      }
    },
    async saveCartGoods(cartGoods) {
      const { data: res } = await uni.request({
        url: this.$domain.data + '/saveCartGoods',
        header: getApp().globalData.header,
        method: 'POST',
        data: { ...cartGoods }
      })

      // console.log(res)
      if (res.status != 200) {
        this.$checkStatus(res.status, res.message)
        return
      }

      uni.showToast({
        icon: 'success',
        title: res.message
      })
      this.getCartGoodsCount()
      this.showParams = false
    },

    async getCartGoodsCount() {
      const { data: res } = await uni.request({
        url: this.$domain.data + '/getCartGoodsCount/' + this.user_id,
        header: getApp().globalData.header
      })
      // console.log(res)
      if (res.status != 200) {
        console.log(res)
        return
      }

      this.options[1].info = res.data.count
    },

    handleChooseAddress() {
      this.showParams = false
      this.userAddressList.forEach((element) => {
        if (element.id == this.current_id) {
          this.userParams.address = element
          uni.showToast({
            icon: 'success',
            title: '地址已切换'
          })
        }
      })
    },
    radioChange(e) {
      this.current_id = e.detail.value
    },
    handleChooseParam(param) {
      if (param.is_empty) {
        return
      }

      this.userParams.goodsType = param
      this.goodsInfo.price = formatPrice(param.price)
    },
    handleshowbigpic(url) {
      uni.previewImage({
        current: url,
        urls: this.imageSwiperList.map((image) => image.url),
        longPressActions: {
          // itemList: ['发送给朋友', '保存图片', '收藏'],
          success: function (data) {
            console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片')
          }
          // fail: function (err) {
          //   console.log(err.errMsg)
          // }
        }
      })
    },
    handleshareForOther() {
      // 分享小程序
      // uni.share({
      //   provider: 'weixin',
      //   scene: 'WXSceneSession',
      //   type: 5,
      //   imageUrl: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/share-logo@3.png',
      //   title: '欢迎体验uniapp',
      //   miniProgram: {
      //     id: 'gh_abcdefg',
      //     path: 'pages/index/index',
      //     type: 0,
      //     webUrl: 'http://uniapp.dcloud.io'
      //   },
      //   success: (ret) => {
      //     console.log(JSON.stringify(ret))
      //   }
      // })
      // console.log('点亮')
      uni.share({
        provider: 'weixin',
        scene: 'WXSceneSession',
        type: 1,
        summary: '我正在使用HBuilderX开发uni-app，赶紧跟我一起来体验！',
        success: function (res) {
          console.log('success:' + JSON.stringify(res))
        },
        fail: function (err) {
          console.log('fail:' + JSON.stringify(err))
        }
      })
    },
    handlespread(index) {
      this.goodsReviews[index].spread = true
    },
    handleshowAllReviews() {
      this.reviewList = [...this.goodsReviews]
      this.showAllReviews = true
    },
    handleshowParams(params) {
      // console.log('点击了')
      this.showParams = true
      this.showParamsStr = params
      this.goodsParamsStatus = 'choose'
    },
    handleSub() {
      if (this.userParams.count === 1) {
        return
      }
      this.userParams.count--
    },
    handleAdd(limit) {
      if (this.userParams.count === limit) {
        return
      }
      this.userParams.count++
    },
    handleInputCount(e, limit) {
      // console.log(e, limit)
      try {
        const count = parseInt(e.detail.value)

        if (count <= 0) {
          this.userParams.count = 1
          uni.showToast({
            icon: 'none',
            title: '数量最小为1'
          })
          return
        }

        if (count <= limit) {
          this.userParams.count = count
          return
        }
        this.userParams.count = limit
        uni.showToast({
          icon: 'none',
          title: '已超过最大数量'
        })
      } catch {
        this.userParams.count = 1
        return
      }
    }
  }
}
</script>

<style lang="scss" scoped>
$info-padding: 40upx;
$info-size: 30upx;
$info-radius: 30upx;
$info-border-color: rgba(
  $color: #000000,
  $alpha: 0.05
);

.view {
  position: relative;
}

.bottom-nav {
  position: fixed;
  width: 100%;
  height: 120upx;
  background-color: #fff;
  line-height: 120upx;
  bottom: 0%;
  left: 0%;
  z-index: 10;
}

.params-pop-wrapper {
  width: 100vw;
  height: 100vh;
  transition: 0.6s ease-in-out;
  position: fixed;

  bottom: 0%;
  left: 0%;
  z-index: 50;
  transition: 0.45s ease-in-out;

  .params-pop {
    position: absolute;
    border-top: 1upx solid rgba($color: #000000, $alpha: 0.1);
    left: 0%;
    // #ifndef H5
    bottom: 0%;
    // #endif

    // #ifdef H5
    bottom: 65upx;
    //#endif
    // min-height: 66vh;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 40upx;
    padding-top: 50upx;
    background-color: #fff;
    border-radius: 30upx 30upx 0 0;
  }

  .goods-params-choose {
    .goods-params-top {
      display: flex;
      justify-content: flex-start;
      image {
        width: 200upx;
        height: 200upx;
        border-radius: 10upx;
      }
      .right {
        margin-left: 30upx;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-direction: column;

        .price {
          color: $def-price-color;
          font-weight: 900;

          margin-bottom: 30upx;
          .small {
            font-size: 40upx;
            font-weight: normal;
          }
          .big {
            font-size: 55upx;
          }
        }

        .details,
        .inventory {
          font-size: 28upx;
          display: flex;

          .gray {
            display: inline-block;
            color: #b8b8b8;
            margin-right: 10upx;
          }
        }
      }
    }

    .goods-params-content {
      position: relative;
      width: 100%;
      min-height: 300upx;

      box-sizing: border-box;
      padding: 30upx;
      padding-top: 60upx;
      margin-top: 20upx;
      font-size: 30upx;

      .goods-params-item {
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: auto;
        padding: 0 50upx;
        height: 60upx;
        margin-right: 30upx;
        margin-bottom: 20upx;
        border-radius: 30upx;
      }

      .params-is-empty {
        color: #707070;
        background-color: #f2f2f2;
      }

      .params-is-not-empty {
        color: #000000;
        background-color: #f2f2f2;
      }

      .params-is-choose {
        background-color: #ff662a;
        color: #fff;
      }
    }

    .goods-params-content::before {
      content: '商品参数';
      position: absolute;
      top: 0%;
      left: 0%;
      font-size: 30upx;
      font-weight: 900;
    }

    .goods-count-content {
      width: 100%;
      height: 80upx;
      position: relative;
      font-size: 30upx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10upx;
      margin-bottom: 50upx;

      .goods-count {
        // position: absolute;
        // right: 80upx;
        display: flex;
        justify-content: center;
        align-items: center;
        // top: 20upx;
        margin-right: 20upx;

        width: 230upx;
        height: 60upx;
        border: 3upx solid rgba($color: #000000, $alpha: 0.06);
        border-radius: 10upx;

        .count-add,
        .count-sub {
          flex: 1;

          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          cursor: pointer;
          font-weight: 900;
        }

        .count-add {
          border-radius: 0 10upx 10upx 0;
          border-left: 3upx solid rgba($color: #000000, $alpha: 0.06);
        }

        .count-sub {
          border-radius: 10upx 0 0 10upx;
          border-right: 3upx solid rgba($color: #000000, $alpha: 0.06);
        }

        .count-input {
          flex: 2;
          text-align: center;
        }
      }
    }

    .goods-count-content::before {
      content: '数量';

      font-weight: 900;
    }
  }

  .address-choose {
    width: 100%;
    .address-choose-title {
      font-size: 35upx;
      width: 300upx;
      // background-color: #4451e1;
      font-weight: 900;
      position: absolute;
      top: 5upx;
      left: calc(50% - 150upx);
      text-align: center;
    }

    .address-content-scroll {
      width: 100%;
      height: 60vh;
      // background-color: #4be708;
      overflow: auto;
      padding-bottom: 100upx;
    }

    .address-content {
      margin: 0 auto;
      width: 100%;
      min-height: 300upx;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
      border-radius: 20upx;
      background-color: #fff;
      border-radius: 15upx;
      margin-top: 30upx;
      font-size: 30upx;
      display: flex;
      padding: 30upx;
      padding-top: 50upx;
      padding-bottom: 20upx;
      justify-content: flex-start;
      box-sizing: border-box;
      position: relative;

      .address-default {
        position: absolute;
        top: 10upx;
        right: 20upx;
        background-color: #447be1;
        color: #fff;
        font-size: 25upx;
        border-radius: 30upx;
        padding: 10upx 20upx;
      }

      .choose-radio {
        flex: 1;

        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        radio {
          transform: scale(0.75);
        }
      }

      .address-content-left {
        flex: 2;
        // background-color: aqua;
        display: flex;
        align-items: flex-end;
        justify-content: flex-start;
        flex-direction: column;

        .left-title {
          font-weight: 900;
          margin-top: 10upx;
        }
      }

      .address-content-right {
        padding-left: 10upx;
        flex: 7;
        // background-color: saddlebrown;
        > view {
          margin-top: 10upx;
        }
      }
    }

    .address-choose {
      background-color: #ff662a;
      color: #fff;
    }

    .add-address {
      width: 100%;
      height: 100upx;
      // background-color: #4451e1;
      display: flex;
      justify-content: center;
      align-items: center;

      view {
        width: 230upx;
        height: 70upx;
        margin: 0 20upx;
        border-radius: 35upx;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 30upx;
        color: #fff;
        font-weight: 900;
      }
      .add-btn {
        background: linear-gradient(to right, #ffbc0d, #ffc00d, #ffc80d);
      }

      .confirm {
        background-color: #ff3c2a;
      }
    }
  }

  .mask {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0%;
    right: 0%;
  }
}

.goods-swiper {
  width: 100vw;
  height: calc(100vw * (3 / 4));

  .goods-swiper-item {
    width: 100%;
    height: 100%;

    image {
      width: 100%;
      height: 100%;
    }
  }
}
.goods-comment,
.goods-info,
.goods-type,
.goods-details {
  font-size: $info-size;
  box-sizing: border-box;
  padding: $info-padding;
  border-radius: $info-radius;
  box-shadow: $def-shadow;
  background-color: #fff;
  width: 100%;
  margin-bottom: 20upx;
}

.goods-details {
  margin-bottom: 100upx;
}

.span-top {
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;

  .span-title {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 900;

    .span-title-count {
      font-weight: normal;
      font-size: 20upx;
      margin-left: 10upx;
    }
  }

  .span-title-icon {
    width: 50upx;
    height: 50upx;
  }

  .span-right {
    color: #c0c4cc;
    font-size: 25upx;
  }
}

.goods-info {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
  border-radius: 0 0 $info-radius $info-radius;

  .goods-info-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    .price {
      color: $def-price-color;
      font-weight: 900;
      .small {
        font-size: 35upx;
      }
      .big {
        font-size: 50upx;
      }
    }

    button {
      padding: 0%;
      margin: 0%;
      border: 0;
      outline: none;
      cursor: pointer;
      box-shadow: none;
      background-color: transparent;
    }
    .share {
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      color: #707070;
      // font-weight: 700;
      font-size: 28upx;

      image {
        width: 40upx;
        height: 40upx;
        // margin-bottom: 5upx;
      }
    }
  }

  .goods-info-name {
    width: 100%;
    font-weight: 900;
    margin: 20upx 0;
    font-size: 40upx;
  }

  .goods-info-intro {
    width: 100%;
    font-size: 30upx;
  }
}

.goods-type {
  .type-title {
    font-weight: 900;
  }

  .type,
  .address {
    display: flex;
    justify-content: space-between;
    align-items: center;

    view:nth-child(2) {
      flex: 5;
      padding: 0 30upx;
      font-size: $info-size;
    }
  }

  .type {
    padding-bottom: 20upx;
    border-bottom: 1upx solid rgba($color: #000000, $alpha: 0.05);
  }

  .address {
    padding-top: 20upx;
  }

  .more {
    width: 40upx;
    height: 40upx;
  }
}

.goods-comment {
  min-height: 300upx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;

  .user-comment-list {
    width: 100%;
    .user-comment {
      width: 100%;
      // min-height: 300upx;
      margin-top: 40upx;
      padding-bottom: 40upx;
      border-bottom: 5upx solid rgba($color: #000000, $alpha: 0.03);
      overflow: hidden;

      // background-color: #4451e1;

      .top {
        display: flex;
        align-items: center;
        .user-aver {
          width: 80upx;
          height: 80upx;
          margin-right: 20upx;
        }
        .user-nick {
          font-size: 25upx;
        }

        .user-rate {
          margin-left: 30upx;
        }
      }

      .user-comment-content {
        padding-bottom: 10upx;
        padding-right: 30upx;
        padding-left: 90upx;
        font-size: 28upx;
        // min-height: 120upx;
        // background-color: #4451e1;
        transition: all 0.3s; /* 可选：添加展开动画 */

        .spread {
          margin-left: 10upx;
          color: #4451e1;
          cursor: pointer;
        }
      }
      .bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 25upx;
        margin-top: 20upx;
        color: #999999;
        .user-goods-type {
        }
      }
    }
  }

  .goods-comment-more {
    view {
      margin-top: 35upx;
      font-size: 25upx;
      padding: 10upx 30upx;
      border-radius: 50upx;
      border: 3upx solid $info-border-color;
    }
  }

  .no-comment {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin-top: 50upx;
    color: #c0c4cc;

    image {
      width: 100upx;
      height: 100upx;
      margin-bottom: 20upx;
    }
  }
}
</style>
